{% extends "main/base.html" %}
{% load static %}
{% load chat %}

{% block title %}聊天{% endblock %}

{% block links %}
  <link href="{% static 'chat/css/chat.css' %}" crossorigin="anonymous" rel="stylesheet">
{% endblock %}

{% block content %}
<form id="backgroundForm" style="display: none;" enctype="multipart/form-data" method="post"
action="{% url 'chat:change-background' %}">
  {% csrf_token %}
  <input type="file" id="backgroundInput" name="background" accept="image/*" onchange="uploadBackground();" alt="background">
</form>
<div class="mt-3 mb-3 row">
  <div class="col text-start">
    <a href="{% url 'main:index' %}" class="btn {% if low %}btn-secondary{% else %}btn-primary{% endif %}" role="button">
      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207l-5-5-5 5V13.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7.207Z"></path>
      </svg>
      返回主页
    </a>
  </div>
  <div class="col text-end">
    <button type="button" data-bs-toggle="modal" data-bs-target="#help" class="btn {% if low %}btn-secondary{% else %}btn-primary{% endif %}">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
      </svg>
      帮助
    </button>
  </div>
</div>
<div class="modal fade" id="help" tabindex="-1" aria-labelledby="helpTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <p class="modal-title fs-5" id="helpTitle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
          </svg>
          帮助
        </p>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul>
          <li>
            你可以通过点击聊天对象（如“公共”）来切换聊天对象。
          </li>
          <li>
            用户名前的标签为“身份”（“用户”除外）。<br>
            只有教徒可以拥有身份。
          </li>
          <li>
            部分用户的标签和用户名字体不同于普通用户的字体。<br>
            <strong>注意，他们是干部或以上等级的教徒！</strong>
          </li>
          {% if user.identity is None %}
          <li>
            拥有身份的用户才可以发布公共信息。
          </li>
          <li>
            如果你需要在本网站拥有身份，请联系干部或以上等级的教徒（“神”除外）。
          </li>
          {% endif %}
          <li>
            <a onclick="selectBackground();" style="cursor: pointer;"
               class="{% if low %}link-secondary{% else %}link-primary{% endif %} text-decoration-none">
            修改聊天背景点这里->
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="users"
     aria-labelledby="usersLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="usersLabel">所有用户</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <nav class="nav nav-pills flex-column">
      <a class="nav-link active" aria-current="page">公共</a>
      {% for user in users %}
      <a class="nav-link border-bottom d-flex justify-content-between align-items-start user-choice" href="{% url 'chat:private' user.id %}">
      <span class="me-auto">
        <img src="{{ user.get_image_url }}" alt="{{ user.username }}" width="24px" height="24px" class="rounded">
        {{ user.get_display|safe }}
      </span>
      {% if user.message_count %}
      <span class="float-end badge rounded-pill bg-danger">
      {% if user.message_count > 99 %}
        99+
      {% else %}
        {{ user.message_count }}
      {% endif %}
      </span>
      {% endif %}
      </a>
      {% endfor %}
    </nav>
  </div>
</div>
<div class="card">
  <div class="card-header text-center">
    <a class="{% if low %}link-secondary{% else %}link-primary{% endif %} text-decoration-none fs-4"
       data-bs-toggle="offcanvas" href="#users" aria-controls="users">
      公共
    </a>
  </div>
  <div class="card-body" style="position: relative;">
    <img src="{{ user.get_background_url }}" alt="背景"
         style="position: absolute; top: 0; left: 0; opacity: .15; width: 100%; height: 100%;">
    <div id="messages" class="overflow-y-auto overflow-x-hidden" style="position: relative;">
      {% for public_message in public_messages %}
        <div class="text-center">
          <small style="color: rgba(0, 0, 0, .3);">{{ public_message.time|time_format }}</small>
        </div>
        <div class="row mb-2">
        {% if public_message.sender != user %}
          <div class="col-6 text-start">
            <span class="align-top">
              {% if public_message.sender.identity is not None %}
              <a href="{% url 'main:believer' public_message.sender_id %}" class="text-decoration-none" target="_blank">
              {% endif %}
              <img src="{{ public_message.sender.get_image_url }}" alt="{{ public_message.sender.username }}" width="24px" height="24px" class="rounded">
              {{ public_message.sender.get_display|safe }}
              {% if public_message.sender.identity is not None %}
              </a>
              {% endif %}
            </span>
            <span class="badge {% if low %}text-bg-dark{% else %}text-bg-primary{% endif %}
            text-wrap lh-base text-start chat-box">
              {{ public_message.content|safe }}
            </span>
          </div>
          <div class="col-6"></div>
        {% else %}
          <div class="col-6"></div>
          <div class="col-6 text-end">
            <a href="{% url 'chat:withdraw' public_message.id %}" class="text-start align-top">
              <span class="btn-close"></span>
            </a>
            &nbsp;
            <span class="badge {% if low %}text-bg-dark{% else %}text-bg-primary{% endif %}
            text-wrap lh-base text-start chat-box">
              {{ public_message.content|safe }}
            </span>
            <span class="align-top">
              {% if public_message.sender.identity is not None %}
              <a href="{% url 'main:believer' public_message.sender_id %}" class="text-decoration-none" target="_blank">
              {% endif %}
              {{ public_message.sender.get_display|safe }}
              <img src="{{ public_message.sender.get_image_url }}" alt="{{ public_message.sender.username }}" width="24px" height="24px" class="rounded">
              {% if public_message.sender.identity is not None %}
              </a>
              {% endif %}
            </span>
          </div>
        {% endif %}
        </div>
      {% empty %}
        <p class="text-center">还没有消息哦~</p>
      {% endfor %}
    </div>
    <hr>
    <form method="post" action="{% url 'chat:send' %}" style="position: relative;">
      {% csrf_token %}
      <div class="form-floating mb-3">
        <textarea class="form-control" id="content" name="content"
                  placeholder="content" required autofocus
                  maxlength="10000" style="height: 15vh;"{% if user.identity is None %} disabled>成为教徒后才能发送公共消息！{% else %}>{% endif %}</textarea>
        <label for="content">内容</label>
      </div>
      <div class="d-grid mb-3">
        <button type="submit" class="btn {% if low %}btn-secondary{% else %}btn-primary{% endif %}"{% if user.identity is None %} disabled{% endif %}>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
            <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"></path>
          </svg>
          发送
        </button>
      </div>
      <a class="{% if low %}link-secondary{% else %}link-primary{% endif %} text-decoration-none" target="_blank"
         href="https://help.luogu.com.cn/rules/academic/handbook/markdown">
        不会使用Markdown？点这里学习吧->
      </a>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
  <script src="{% static 'chat/js/change-background.js' %}" crossorigin="anonymous"></script>
  <script>
    let messages = document.getElementById('messages');
    messages.scrollTop = messages.scrollHeight;
    change_background_url = '{% url 'chat:change-background' %}';
  </script>
{% endblock %}